import React from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { actionCreators } from 'components/Home/store'
import logoImg from './img/logo.png'
import Scroll from 'base/Scroll'
import {
  Wrapper,
  ImgWrapper,
  TabWrapper,
  Tabs,
  PersonWrapper,
  PersonInfo
} from './style'

const Nav = (props) => {
  const { userInfo, navTabs, activeRouter, linkClick } = props

  return (
    <Wrapper>
      <ImgWrapper>
        <img src={logoImg} alt="" />
      </ImgWrapper>
      <TabWrapper>
        <Scroll
          width="12"
          bgColor="rgba(0, 0, 0, .6)"
          color="rgba(170, 170, 170, .3)"
          hoverColor="rgba(170, 170, 170, .6)"
        >
          <Tabs>
            {
              navTabs.map(item => (
                <Link
                  className={item.get('path') === activeRouter ? 'tab active' : 'tab'}
                  key={item.get('path')}
                  to={item.get('path')}
                  onClick={() => {linkClick(item.get('path'))}}
                >
                  <span className="iconfont" dangerouslySetInnerHTML={{__html: item.get('icon')}}></span>
                  <span>{item.get('title')}</span>
                </Link>
              ))
            }
          </Tabs>
        </Scroll>
      </TabWrapper>
      <PersonWrapper>
        <PersonInfo>
          <span className="iconfont marginR5">&#xe611;</span>
          <span>{userInfo.get('userName')}</span>
        </PersonInfo>
        <PersonInfo>
          <span className="iconfont marginR5">&#xe623;</span>
          <span>注销</span>
        </PersonInfo>
      </PersonWrapper>
    </Wrapper>
  )
}

const mapState = (state) => {
  return {
    userInfo: state.getIn(['app', 'userInfo']),
    navTabs: state.getIn(['home', 'navTabs']),
    activeRouter: state.getIn(['home', 'activeRouter'])
  }
}

const mapActions = (dispatch) => ({
  linkClick: (path) => {
    dispatch(actionCreators.changeActiveRouterAction(path))
  }
})

export default connect(mapState, mapActions)(Nav)
